<template>
  <div class="group-table-box">
    <Row class="group-top">
      <Col span="16" class="group-top">
        <div class="input-item input-flex">
          <span>活动名称：</span>
          <Input v-model="form.groupName" placeholder="活动名称" style="width: 100px;" />
        </div>

        <div class="input-item input-flex">
          <span>活动分类：</span>
          <Input v-model="form.createName" placeholder="活动分类" style="width: 100px;" />
        </div>

        <div class="input-item input-flex">
          <span>创建时间：</span>
          <DatePicker
            v-model="form.date"
            type="daterange"
            format="yyyy-MM-dd"
            confirm
            placement="bottom-start"
            placeholder="选择创建时间"
            style="width: 200px"
            @on-change="onClickDatePickerChange"
          ></DatePicker>
        </div>

        <div class="input-item">
          <Button type="info" class="input-btn" @click="onClickSearch">搜索</Button>
          <Button type="warning" class="input-btn" @click="onClickReset">重置搜索</Button>
        </div>
      </Col>

      <Col span="8" class="group-right">
        <div class="input-item" style="margin-right: 0;">
          <Button type="info" class="input-btn">智能报表管理</Button>
          <Button type="info" @click="clickAddActivity">新增活动</Button>
        </div>
      </Col>
    </Row>
    <div class="table-container">
      <Table
        border
        class="table-container-table"
        :columns="columns7"
        :data="tableData"
        :loading="isLoading"
      ></Table>
      <Page
        :total="totalPageCount"
        :current="form.pageIndex"
        :page-size="10"
        show-elevator
        class="table-container-page"
        @on-change="getTableData"
      />
    </div>

    <!-- 点击新增活动 -->
    <Modal
      v-model="showAddModal"
      width="50"
      footer-hide
    >
      <div class="modal-container">
        <Row class="modal-content" :gutter="16">
          <Col span="5">
            <p class="modal-label">活动名称</p>
          </Col>
          <Col span="19">
            <Input v-model="form.name" placeholder="请输入..." />
          </Col>
        </Row>
        <Row class="modal-content" :gutter="16">
          <Col span="5">
            <p class="modal-label">活动分类</p>
          </Col>
          <Col span="19">
            <Select v-model="form.class">
              <Option value="撒钱活动">撒钱活动</Option>
              <Option value="VIP活动">VIP活动</Option>
            </Select>
          </Col>
        </Row>
        <Row class="modal-content" :gutter="16">
          <Col span="5">
            <p class="modal-label">测评分类</p>
          </Col>
          <Col span="19">
            <Select v-model="form.class">
              <Option value="撒钱活动">撒钱活动</Option>
              <Option value="VIP活动">VIP活动</Option>
            </Select>
          </Col>
        </Row>
        <Row class="modal-content" :gutter="16">
          <Col span="5">
            <p class="modal-label">资格说明</p>
            <p class="modal-label-detail">（若不填写则不展示）</p>
          </Col>
          <Col span="19">
            <Input v-model="form.levelInfo" type="textarea" :rows="4" placeholder="请输入" />
          </Col>
        </Row>
        <Row class="modal-content" :gutter="16">
          <Col span="5">
            <p class="modal-label">活动说明</p>
            <p class="modal-label-detail">（若不填写则不展示）</p>
          </Col>
          <Col span="19">
            <Input v-model="form.activeInfo" type="textarea" :rows="4" placeholder="请输入" />
          </Col>
        </Row>
        <Row class="modal-content" :gutter="16">
          <Col span="5">
            <p class="modal-label">商品说明</p>
            <p class="modal-label-detail">（单张图尺寸建议222*222，至多可上传8张）</p>
          </Col>
          <Col span="19">
            <Upload
              multiple
              :before-upload="handleUpload"
              accept="image/jpg, image/jpeg, image/png"
              type="drag"
              action="/"
            >
              <div style="padding: 70px 0">
                <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                <p>点击上传图片</p>
              </div>
            </Upload>
          </Col>
        </Row>
        <Row class="modal-content" :gutter="16">
          <Col span="5">
            <p class="modal-label">关联商品</p>
          </Col>
          <Col span="19">
            <Select v-model="form.class">
              <Option value="撒钱活动">撒钱活动</Option>
              <Option value="VIP活动">VIP活动</Option>
            </Select>
          </Col>
        </Row>
        <Row class="modal-content" :gutter="16">
          <Col span="5">
            <p class="modal-label">预报名问卷</p>
          </Col>
          <Col span="19">
            <Select v-model="form.class">
              <Option value="撒钱活动">撒钱活动</Option>
              <Option value="VIP活动">VIP活动</Option>
            </Select>
          </Col>
        </Row>
        <Row class="modal-content" :gutter="16">
          <Col span="5">
            <p class="modal-label">测评问卷</p>
          </Col>
          <Col span="19">
            <Select v-model="form.class">
              <Option value="撒钱活动">撒钱活动</Option>
              <Option value="VIP活动">VIP活动</Option>
            </Select>
          </Col>
        </Row>
        <div slot="footer" class="modal-footer">
          <Button type="primary" @click="onClickEditConfirm">完成</Button>
        </div>
      </div>
    </Modal>

    <!-- 点击筛选名单 -->
    <Modal
      v-model="showScreenModal"
      width="50"
      footer-hide
    >
      <div class="modal-container">
        <p>总计报名 {{ dataModal.length }} 人，已选中 {{ screenSelected.length }} 人</p>
        <Table
          border
          ref="selection"
          :columns="columnsModal"
          :data="dataModal"
          @on-row-dblclick="clickScreenRow"
          @on-selection-change="changeScreenCheckRow"
        ></Table>
        <div slot="footer" class="modal-footer">
          <Button type="primary" @click="onClickScreenConfirm">完成</Button>
        </div>
      </div>
    </Modal>
  </div>
</template>

<script>
export default {
  data () {
    return {
      showAddModal: false,
      showScreenModal: false,
      isLoading: false,
      form: {
        name: '',
        pageIndex: 1,
      },
      totalPageCount: 10,
      columns7: [
        {
          title: '序号',
          type: 'index',
          align: 'center'
        },
        {
          title: '活动名称',
          key: 'groupName',
          align: 'center'
        },
        {
          title: '创建时间',
          width: 100,
          key: 'issueTime',
          align: 'center'
        },
        {
          title: '所属活动分类',
          key: 'userName',
          align: 'center'
        },
        {
          title: '所属测评分类',
          key: 'price',
          align: 'center'
        },
        {
          title: '起止时间',
          key: 'tagListLabel',
          align: 'center'
        },
        {
          title: '报名人数',
          key: 'groupStatusText',
          align: 'center'
        },
        {
          title: '关联商品',
          key: 'groupStatusText',
          align: 'center'
        },
        {
          title: '状态',
          key: 'groupStatusText',
          align: 'center'
        },
        {
          title: '操作',
          key: 'action',
          width: 200,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  margin: '5px',
                  width: '70px'
                },
                on: {
                  click: () => {
                    this.check(params.index)
                  }
                }
              }, '修改'),
              h('Button', {
                props: {
                  type: 'success',
                  size: 'small'
                },
                style: {
                  margin: '5px',
                  width: '70px'
                },
                on: {
                  click: () => {
                    this.screen(params.index)
                  }
                }
              }, '筛选名单'),
              h('Button', {
                props: {
                  type: 'success',
                  size: 'small'
                },
                style: {
                  margin: '5px',
                  width: '70px'
                },
                on: {
                  click: () => {
                    this.remove(params.index)
                  }
                }
              }, '查看详情'),
              h('Button', {
                props: {
                  type: 'success',
                  size: 'small'
                },
                style: {
                  margin: '5px',
                  width: '70px'
                },
                on: {
                  click: () => {
                    this.remove(params.index)
                  }
                }
              }, '提前结束')
            ]);
          }
        }
      ],
      tableData: [{
        groupStatusText: '123123'
      }],
      checkReturnData: {
      },
      columnsModal: [
        {
          title: '序号',
          type: 'index',
          align: 'center'
        },
        {
          title: '用户名',
          key: 'name',
          align: 'center'
        },
        {
          title: '创建时间',
          key: 'time',
          align: 'center'
        },
        {
          title: '问卷情况',
          key: 'action',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  margin: '5px',
                  width: '70px'
                },
                on: {
                  click: () => {
                    this.checkScreenDetail(params.index)
                  }
                }
              }, '查看详情')
            ]);
          }
        },
        {
          title: '是否选中',
          type: 'selection',
          align: 'center'
        },
      ],
      dataModal: [
        {
          name: 'John Brown',
          time: '213123213',
          _checked: false
        },
        {
          name: 'John213',
          time: '213123213',
          _checked: false
        },
      ],
      screenSelected: []
    }
  },
  mounted() {
    this.getTableData()
  },
  watch: {
  },
  methods: {
    onClickSearch() {
      // 点击搜索
    },
    onClickReset() {
      // 点击重置按钮
    },
    clickAddActivity() {
      // 点击新增活动按钮
      this.showAddModal = true
    },
    onClickEditConfirm() {
      // 新增活动按钮 点击完成
    },
    check(index) {

    },
    screen(index) {
      // 点击筛选名单
      this.showScreenModal = true
    },
    onClickScreenConfirm() {
      // 筛选按钮 点击完成按钮
    },
    checkScreenDetail() {
      // 筛选按钮中  的查看详情
    },
    changeScreenCheckRow(selection) {
      // 筛选按钮中  改变选中状态时
      this.screenSelected = selection
    },
    clickScreenRow(data, index) {
      // 点击行的事件
      this.dataModal[index]._checked = !this.dataModal[index]._checked
      let isChecked = this.dataModal[index]._checked
      if(this.dataModal[index]._checked) {
        this.screenSelected.push(data)
      } else {
        // TODO: 循环查找那个被删除的数据  然后移除掉
      }
    },
    remove(index) {

    },
    getTableData(index) {

    },
    onClickDatePickerChange(e) {
      // ["2018-08-07", "2018-09-12"]
      // this.form.date = e;
    },
    handleUpload(file) {
      const formData = new FormData()
      formData.append('file', file)
      return false
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.input-flex {
  display: inline-flex !important;
  flex-direction: column;
}
.pull-right {
  float: right;
}
.group-table-box {
  padding: 20px;
}
.group-top {
  display: flex;
  align-items: flex-end;
}
.group-right {
  display: flex;
  justify-content: flex-end;
}
.input-item {
  display: inline-block;
  margin: 0 20px 20px 0;
  color: #000;
}
.input-btn {
  margin-right: 10px;
}
.table-container-page {
  text-align: center;
  margin-top: 20px;
  color: #000;
}
.modal-container {
  padding: 30px 30px 20px 30px;
}
.modal-content {
  margin-top: 15px;
}
.modal-label {
  font-size: 14px;
  line-height: 32px;
  text-align: center;
}
.modal-label-detail {
  text-align: center;
}
.modal-input {
  width: 100%;
}
.modal-footer {
  text-align: center;
  margin-top: 15px;
}
.modal-footer button {
  color: #fff;
  width: 100px;
}
</style>
